<template>
    <div class="China-US-consultant-team"  id="consultant-team">
        <div class="container">
            <header class="clearfix">
                <p>中美置业团队</p>
                <p>DYNAMIC</p>
            </header>
            <article class="swiper-container" id="China-US-consultant-team-swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item, index) in consultantTeamItem" :key="index">
                        <aside>
                            <img :src="consultantPhotoIsNullImg(item.photo)">
                            <p class="transition">{{ isNull0(item.jobTitle) }}</p>
                        </aside>
                        <header>{{ isNull0(item.chineseName) }}</header>
                        <p>{{ isNull0(item.englishName) }}</p>
                        <a-button size="small">
                            <router-link to="/Counselor">了解更多 &gt;</router-link>
                        </a-button>
                    </div>
                </div>
                <div class="swiper-button-next iconfont icon-you"></div>
                <div class="swiper-button-prev iconfont icon-zuo"></div>
            </article>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                consultantTeamSwiper: null,//顾问团队轮播的swiper配置
                consultantTeamItem: [],//顾问团队数据
            }
        },
        computed: {},
        created() {
        },
        mounted() {
            // 获取顾问团队数据
            this.getConsultantTeamData();

        },
        methods: {
            // 获取顾问团队数据
            getConsultantTeamData() {
                this.$get('/counselor/list/item/1/50').then(res => {
                    if (res.status == 0) {
                        this.consultantTeamItem = res.list;

                        this.$nextTick(() => {
                            //顾问团队轮播的swiper配置
                            this.consultantTeamSwiper = new Swiper('#China-US-consultant-team-swiper-container', {
                                autoplay: {
                                    delay: 5000,//自动切换的时间间隔，单位ms
                                    stopOnLastSlide: false,//如果设置为true，当切换到最后一个slide时停止自动切换
                                    disableOnInteraction: true,//用户操作swiper之后，是否禁止autoplay。默认为true,如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay
                                },
                                loop: true,
                                loopedSlides: Object.keys(this.consultantTeamItem).length,
                                spaceBetween: 0,//slide之间的距离（单位px）
                                slidesPerView: 5,//设置slider容器能够同时显示的slides数量
                                navigation: {//前进后退按钮组件
                                    nextEl: '.swiper-button-next',
                                    prevEl: '.swiper-button-prev',
                                },
                                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                                observeParents: true,//修改swiper的父元素时，自动初始化swiper
                            });
                        })
                    }else{
                        console.log(res.msg);
                    }
                });
            },


        },
        components: {}
    }
</script>

<style scoped lang="less" type="text/less">
    body {
        .China-US-consultant-team {
            padding: 50px 0;
            background: #fff;
            > .container {
                >header{
                    height: 70px;
                    background: url("/static/img/recommend-house-header.png") no-repeat center center;
                    background-size: 100%;
                    >p{
                        width: 50%;
                        font-size: 18px;
                    }
                    >p:first-of-type{
                        float: left;
                        text-align: right;
                    }
                    >p:last-of-type{
                        width: 48%;
                        float: right;
                        text-align: left;
                        margin: 35px 0 0 0;
                        font-family: -webkit-pictograph;
                    }
                }
                > #China-US-consultant-team-swiper-container {
                    margin: 60px 0 0 0;
                    > .swiper-wrapper {
                        .swiper-slide {
                            text-align: center;
                            > aside {
                                width: 156px;
                                height: 156px;
                                border-radius: 50%;
                                overflow: hidden;
                                margin: 0 auto;
                                cursor: pointer;
                                text-align: center;
                                background: #000;
                                position: relative;
                                > img {
                                    height: 100%;
                                }
                                > p {
                                    width: 100%;
                                    font-size: 14px;
                                    color: #fff;
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    -webkit-transform: translate(-50%, -50%);
                                    -moz-transform: translate(-50%, -50%);
                                    -ms-transform: translate(-50%, -50%);
                                    -o-transform: translate(-50%, -50%);
                                    transform: translate(-50%, -50%);
                                    opacity: 0;
                                }
                            }
                            > aside:hover {
                                > img {
                                    opacity: 0.5;
                                }
                                > p {
                                    opacity: 1;
                                }
                            }
                            > header {
                                font-size: 16px;
                                margin: 10px 0 0 0;
                            }
                        }
                    }
                    .swiper-button-prev,
                    .swiper-button-next {
                        background: transparent;
                        box-shadow: none;
                    }
                    .swiper-button-prev {
                        left: -14px;
                    }
                    .swiper-button-next {
                        right: -28px;
                    }
                }
            }
        }
    }
</style>
